
<div class="row animate fadeIn">
    <form id="add_chg_elem" class="form-horizontal"  method="post">
      <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Add Charge Elements</i></h5>
        <div class="ibox-tools">    
            <button  id="sads" class="btn btn-sm btn-primary save-btn-tab">Save</button>
            <a id = "cancel_add" class="btn btn-sm btn-outline btn-info cancel-btn-tab">Cancel</a>
        </div>
      </div>
        <div class="ibox-content">
            <div class="form-group"><label class="col-lg-3 control-label">Charge Code</label>
                <div class="col-lg-10 input-s">
                    <input type="text" name = "chg_code" class="form-control">
                </div>
            </div>
            <div class="form-group"><label class="col-lg-3 control-label">Charge Name</label> 
                <div class="col-lg-11 input-s">
                    <input type="text" name="chg_name" class="form-control">
                </div>
            </div>
            <div class="form-group"><label class="col-lg-3 control-label">Description</label> 
                <div class="col-lg-11 input-s">
                    <input type="text" name="chg_desc" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">Compute Engine</label>
                    <div class="col-lg-10 input-s">
                    <select style="width: 159px;" id="engine_com" class="chosen-select" name="chg_eng">
                        <?php foreach ($engine as $eng) { ?>
                            <option value="<?php echo $eng->compute_engine; ?>" <?php echo($eng->compute_engine == "S" ? 'selected' : '' ); ?> ><?php echo $eng->meaning; ?></option>
                        <?php } ?>
                    </select>
                    </div>    
            </div>
        </div>    
    </form>
    <div id="addOption">
      <div id="" class="ibox-content">
        <h3 style="color: #00afef">Add Option Menu</h3>
          <form  id="option-form" class="form-inline">
              <input type="hidden" id="a_chg_id" name="chg_id">
                  <table id="pgTable"class="table table-bordered" style="width:70%;">
                    <thead>
                      <tr>
                        <th>Option Code</th>
                        <th>Option Name</th>
                        <th>Value</th>
                        <th>Enable</th>
                        <th>Action</th>
                      </tr>
                      <tr>
                        <td style="margin:0px;padding:0px;"><input style="width:100%;" type="text" id="op_code" name="opt_code" class="form-control"></td>
                        <td style="margin:0px;padding:0px;"><input style="width:100%;" type="text" id="op_name" name="opt_name" class="form-control"></td>
                        <td style="margin:0px;padding:0px;"><input style="width:100%;" type="text" id="op_val"  name="opt_val"  class="form-control"></td>
                        <td style="border:1px solid #EBEBEB;padding-left:20px; padding-bottom:0px;";><input  type="checkbox" name="opt_ena" value="ok" class="i-checks" checked ></td>
                        <td style="margin:0px;padding:0px;"><button title="Save" style="width:100%;" class="btn btn-white" id="gana"><i class="fa fa-plus success"></i></button></td>
                      </tr> 
                    </thead>
                    </form>
                    <tbody id="tbodydaw" class="animate fadeIn">
                                                                  
                    </tbody>
                  </table> 
      </div>
    </div>
</div>
            
      <script>
$(document).ready(function(){
                var mID;
                $(".chosen-select").chosen({width:"95%;"});
                $('#addOption').hide();
                var counter = 0;

              $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
              });

               $("#option-form").validate({
                rules:{
                  opt_code: {
                      required: true,
                      lettersonly: true
                  },
                  opt_name: {
                      required: true,
                      lettersonly: true
                  },
                  opt_val: {
                      required: true,
                      number: true
                  }
                },
                submitHandler: function(form){
                    console.log('clicked!');
                
                    $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax').'/insert_chg_option'); ?>",
                        data: $('#option-form').serialize(),
                        dataType: 'json',
                    success: function(data){
                        if(data[0].error == 1){
                            notifymsg("danger",data[0].msg);
                        }else{
                        $('#tbodydaw').empty();
                        console.log(data);
                        var trHTML = '';
                        notifymsg("success",". . .Menu Added Successfully");
                        $.each(data, function(i, item) {
                            var cb_ena = "hover";
                            if(data[i].enable_flag == "Y"){
                            cb_ena = "checked";
                            }
                            // trHTML += '<tr><td>' + data[i].menu_name + '</td><td><button class="btn btn-outline btn-info">Edit</button></td></tr>';
                               trHTML += '<tr><td>' + data[i].option_code + '</td><td>' + data[i].option_name + '</td><td>' + data[i].option_value + '</td><td style="text-align:center; padding-left:5px;"><div style="cursor:default;" class="state icheckbox_square-green '+cb_ena+'"></div></td><td></td></tr>';
                        });
                        $('#tbodydaw').append(trHTML);
                        $('#option-form')[0].reset();
                        $('#opt_ena').attr('checked','checked'); 
                          }
                      }
                    });
                 }
               });

               $("#add_chg_elem").validate({
                 rules: {
                     chg_code: {
                         required: true,
                         capitalonly: true
                     },
                     chg_name: {
                         required: true,
                         lettersonly: true
                     },
                     chg_eng: {
                         required: true
                     }
                 }
                 ,
                 submitHandler: function(form){
                    dataString = $("#add_chg_elem").serialize();
                    $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax').'/insert_charge_element'); ?>",
                        data: dataString,
                        dataType: 'json',
                    success: function(data){
                           $('#module-id').val(data.modID); 
                           if(data[0].error == 1){
                            notifymsg("danger",data[0].msg);
                           }else{
                           notifymsg("success",". . .New Module Added Successfully");
                           mID = data[0].id; console.log(mID);
                           $('#a_chg_id').val(mID);
                           $('#addOption').show();
                           $('#add_chg_elem').find('input, button').attr('disabled','disabled');
                           $('#engine_com').prop('disabled', true).trigger("chosen:updated");
                           $('#cancel_add').html('Complete');
                              }
                            }       
                        });
                 
                 
                 //$('#addMod')[0].reset(); 
                 }
             });

                   function alert_cancel(){
                              swal({
                                          title: "Are you sure?",
                                          text: "Your work will not be save",
                                          type: "warning",
                                          showCancelButton: true,
                                          confirmButtonColor: "#DD6B55",
                                          confirmButtonText: "Leave",
                                          cancelButtonText: "Stay",
                                          closeOnConfirm: true,
                                          closeOnCancel: true },
                                      function (isConfirm) {
                                          if (isConfirm) {
                                            swal("success");
                                              close_add(); active_search();
                                              notifymsg("hide","hide");
                                          } else {
                                              swal("Cancelled");
                                          }
                                      });
                          }
              $('#addX').click(function(){
                    close_add();        
               });
              $('#cancel_add').click(function () {
                if($('#cancel_add').html() == "Complete"){
                  close_add(); active_search();
                  notifymsg("hide","hide");
                }else{            
                  alert_cancel();
                }
               });
            });
       
</script>
